<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner_2" v-for="item in banner">
				<img :src="item.src" alt="" />
				<p ref='a'>{{ item.desc }}</p>
			</div>
			<div class="content">
				<nav-v></nav-v>
				<consult-v></consult-v>
				<div class="introduce">
					<div class="title"><p>某某简介</p><em></em></div>
					<p class="con">{{ introduce_con }}</p>
				</div>
				<div class="found">
					<div class="line">
						<div></div>
						<svg class="wqd-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329.73 329.73"><circle fill="#de402e" cx="164.87" cy="164.87" r="164.87"></circle></svg>
						<svg class="wqd-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329.73 329.73"><circle fill="#de402e" cx="164.87" cy="164.87" r="164.87"></circle></svg>
						<svg class="wqd-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329.73 329.73"><circle fill="#de402e" cx="164.87" cy="164.87" r="164.87"></circle></svg>
					</div>
					<div class="con">
						<div  v-for="item in found_txt">					
							<div class="time">{{ item.time }}</div>
							<div class="box">
								<strong>{{ item.title }}</strong>
								<p>{{ item.con }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="about_car">
					<div class="title"><p>核心团队</p><em></em></div>
					<swiper auto loop :interval='3000' dots-position='center' height="6.5rem">
				    	<div v-for="item in about_car">
				      	<swiper-item>
				      		<img :src="item.src" />
				      		<p class="carTil"><strong>{{ item.title }}</strong> <br /> {{ item.titles }}</p>
				      		<ul>
				      			<li>{{ item.desc }}</li>
				      			<li>{{ item.desc2 }}</li>
				      			<li>{{ item.desc3 }}</li>
				      			<li>{{ item.desc4 }}</li>
				      			<li>{{ item.desc5 }}</li>
				      			<li>{{ item.desc6 }}</li>
				      			<li>{{ item.desc7 }}</li>
				      		</ul>
				      	</swiper-item>
				      </div>
				    </swiper>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import consult from '../public/consult'
import nav from '../public/nav'
import towBanner from '../../assets/towBanner.jpg'

import about_car1 from '../../assets/about_car1.jpg'
import about_car2 from '../../assets/about_car2.jpg'
import about_car3 from '../../assets/about_car3.jpg'

import {Swiper, SwiperItem} from 'vux'
export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	consultV : consult,
  	navV : nav, Swiper, SwiperItem
  },
  data () {
    return {
    	banner : [
    		{src : towBanner, desc : '—— 打造时尚有品位的家居生活和人文环境。'}
    	],
    	introduce_con : '广州某某文化传播有限公司属正规注册手绘壁画公司，专业从事手绘墙画，致力于室内外墙面彩绘壁画装饰的企业。多年来，我们一直全心致力于高水准设计，专业化制作，高品质施工，用心的服务，我们充分考虑环境与人文的和谐统一，以倡导文明，宣传公益，健康运动，绿色环保宣传城市文化为己任，为您打造时尚有品位的家居生活和人文环境。',
    	found_txt : [
    		{
    			time : '2016.10.01',
    			title : '品牌形象升级',
    			con : '十月，某某官方网站PC端，移动端全新升级，升级后的网站简洁明了，体验界面友好，不仅提升了客户浏览体验的友好度，也更加符合了某某的品牌形象。'
    		},
    		{
    			time : '2015.05.18',
    			title : '服务能力提升',
    			con : '某某历经两年多的发展，已经在行业内建立了一套完整的发展思路，经过行业内战略整合，某某旗下发展到50位顶级设计师，以及强大的施工团队，某某服务实力得到飞跃提升，为客户带来更优质的服务。'
    		},
    		{
    			time : '2013.10.10',
    			title : '某某正式成立',
    			con : '广州某某文化传播有限公司正式注册成立，专业从事手绘墙画，致力于室内外墙面彩绘壁画。某某创立之初就以高水准的设计、专业化的制作、高品质的施工和用心的服务受到了客户的一致好评。'
    		},
    	],
    	about_car : [
    		{
    			src : about_car1,
    			title : '李方东',
    			titles : '某某殿堂级大师',
    			desc : '◎李可染画院西方材料与技法研究室坦培拉专业讲师',
				desc2 : '◎ 中央美术学院综合绘画语言高级研修班特聘教师',
				desc3 : '◎ 中国壁画学会会员',
				desc4 : '◎ 中国坦培拉画会会员',
				desc5 : '◎ 辽宁省美术家协会会员',
				desc6 : '◎ 沈阳市青年美术家协会理事',
				desc7 : '◎ 沈阳市美术家协会会员',
			},
    		{
    			src : about_car2,
    			title : '林  杰',
    			titles : '某某殿堂级大师', 
    			desc : '◎ 1966年出生于福建',
				desc2 : '◎ 1992年毕业于天津美院',
				desc3 : '◎ 2013年进修于中央美院',
				desc4 : '◎ 福建美术家协会会员',
				desc5 : '◎ 中国宋庄油画写生学会副会長',
				desc6 : '◎ 2008年作品《故乡>>选入澳大利亚悉尼美展，2011年作品《满载而归》选入台湾国际艺术博览会展，2011年作品《清晨》入选广东省第十一届美术书法摄影作品联展，2013年作品《老家》和《深圳老巷》入选广东省第十二届美术书法摄影作品联展。',
				desc7 : '◎ 油画作品多次被国内外藏家收藏，作品多次选入省市油画展览并获奖等。',
					    			
    		},
    		{
    			src : about_car3,
    			title : '张瑞尧',
    			titles : '某某殿堂级大师',
    			desc : '◎ 1963年出生于河南南阳，自幼酷爱绘画、泥塑、雕刻。',
				desc2 : '◎ 1987年篆刻“万象更新”获本区优秀奖，宣传画“母亲”获三等奖。',
				desc3 : '◎ 1993年离职只身来京投师天津美院教授叶曙光为师，学习雕刻，泥塑，多次参加省市级展会，在北京，山东，河南，福建雕刻过大型群雕。',
				desc4 : '◎ 现为中国工艺美术家协会会员，京西文化发展协会会员、北京青年基督教白雪美术协会会员、西藏自治区书画艺术研究院研究员。',
    			
    		},
    	],
    }
  },
  mounted () {
  	setTimeout(()=>{	
  		this.$refs.a[0].style.right="0"
  	},300)
  }
}

</script>

<style type="text/css" scoped>
	/* about.style */

	.introduce {
		background: #f7f7f7;
	}
	.introduce .con{
		padding:0 0.2rem 0.5rem 0.2rem; color:#696969;line-height: 0.25rem; text-indent: 1em;
	}
	
	.content .title{
		width:55% !important; margin: 0 auto; position: relative; border-bottom: 0.02rem solid #ccc;  margin-bottom: 0.3rem;  padding-top: 0.2rem;
	}
	.content .title p{
		font-size: 0.24rem; width: 60%; margin: 0 auto; text-align: center; line-height: 0.7rem;
	}
	.content .title em{
		width: 40%; height: 0.02rem; background: #F54F36; position: absolute; left: 30%;
	}
	
	.found{
		background: #f7f7f7; overflow: hidden;
	}
	.found .line {
		float: left; margin-left: 0.2rem; margin-right: 0.2rem; position: relative;
	}
	.found .line div{
		width: 0.03rem; height: 7.26rem; background: #d6d6d6;
	}
	.found .line svg{
		width: 0.2rem; height: 0.2rem; position: absolute; top: 0.3rem; left: -0.08rem;
	}
	.found .line svg:nth-of-type(2){
		top: 2.6rem;
	}
	.found .line svg:nth-of-type(3){
		top: 5.11rem;
	}
	.found .con{
		margin-left: 0.45rem; padding-top: 0.28rem;
	}
	.found .time{
		width:1rem; height: 0.25rem; color: #fff; border-radius: 0.03rem; background: #de402e; text-align: center; line-height: 0.25rem; margin-bottom: 0.1rem;
	}
	.found .con .box{
		border: 0.01rem solid #b0b0b0; background: #fff; color:#696969; border-radius: 0.05rem; width: 84%; margin-bottom: 0.4rem; padding:0.15rem 0.1rem;
	}
	.found .con strong{
		line-height: 0.25rem;
	}
	.found .con p{
		line-height: 0.22rem; margin-bottom: 0.1rem; 
	}
	
	.about_car{
		margin-bottom: 0.15rem;
	}
	.about_car img{
		width: 2.2rem; height: 2.2rem; margin-left: 0.286rem;
	}
	.about_car .title{
		width: 58% !important;
	}
	.about_car .carTil{
		text-align: center; margin:0.1rem 0;  color:#696969; font-size: 0.14rem;	
	}
	.about_car .carTil strong{
		font-size: 0.16rem; color: #000;
	}
	.about_car li{
		color:#696969; line-height: 0.25rem; margin-left: 0.17rem; list-style: none; 
	}
	
</style>
<style type="text/css">
	.banner_2{
		position: relative;
	}
	.banner_2 img{
		width: 100%; height: 0.9rem;
	}
	.banner_2 p{
		color: #fff; position: absolute; top: 0.6rem; right: -22rem; -webkit-transition: 0.2s; transition: 0.5s;
	}

	.about_car .vux-slider > .vux-swiper{
		width: 90% !important;
	}
	.about_car .vux-swiper-item{
		width: 87% !important; margin-left: 0.2rem; height: 0 !important;
	}
	.about_car .vux-indicator i{
		width: 0.1rem !important; height: 0.1rem !important; border-radius: 0.1rem !important; background: #0093dd !important;
	}
	.about_car .vux-indicator .active,.carousel_2 .vux-indicator .active{
		background-color: #f8c300 !important;
	}	
</style>
